<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <div class="grid-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div> -->
    <div class="flex-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
<style>
    /* 通过给 grid-container 添加 gap 属性，可以非常方便的设置网格行与列之间的间隙 */
    /* .grid-container {
        display: grid;
        border: 5px solid;
        padding: 20px;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 5px;
    }
    .item {
        width: 100px;
        height: 100px;
        background: deeppink;
        border: 2px solid green;
    } */

    /* 默认情况下，项目都排在一条线。如果排不下，就nowrap不换行或者wrap换行 */
    /* gap 属性的优势在于，它避免了传统的使用 margin 的时候需要考虑第一个或者最后一个元素的左边距或者右边距的烦恼。
    正常而言，4 个水平的 flex item，它们就应该只有 3 个间隙。gap 只生效于两个 flex item 之间。 */
    .flex-container {
        width: 800px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border: 2px solid green;
        gap: 5px;
    }

    .item {
        width: 80px;
        height: 100px;
        background: deeppink;
    }
</style>

</html>